<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <!--查询动作-1  -->
    <script src="js/axios.min.js"></script>
    <script src="js/vue.js"></script>
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
            display: flex;
            justify-content: center; /* 居中内容 */
        }
        .main {
            width: 100%; /* 设置宽度为100% */
            padding: 20px;
            transition: 0.5s;
            box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
        }
        .container {
            padding: 20px;
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }
        .section {
            margin-bottom: 20px;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        h2 {
            margin-top: 0;
            color: #333;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            font-size: 14px; /* 增加字体大小 */
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
            vertical-align: middle; /* 垂直居中对齐 */
        }
        td img {
            max-width: 100px;
            height: auto;
            border-radius: 5px; /* 圆角效果 */
        }
        .center-align {
            text-align: center; /* 居中对齐 */
        }

        .left-align {
            text-align: left; /* 左对齐 */
        }
        th {
            background-color: #4CAF50;
            color: #333; /* 深灰色 */
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        tr:hover {
            background-color: #ddd;
        }
        .toolbar {
            position: fixed;
            top: 0;
            right: 0;
            background-color: #fff;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            display: flex;
            align-items: center;
        }
        .toolbar button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s, transform 0.2s;
            margin-right: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .toolbar button:hover {
            background-color: #45a049;
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
            transition: opacity 0.3s;
        }
        .modal.show {
            display: block;
            opacity: 1;
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            animation: fadeIn 0.3s;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group input[type="text"] {
            width: 200px; /* 调整宽度 */
            padding: 8px 12px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            transition: border-color 0.3s;
        }

        .form-group input[type="text"]:focus {
            border-color: #4CAF50;
            outline: none;
        }
        .form-section {
            margin-bottom: 20px;
        }

        .form-section h3 {
            margin-top: 0;
            color: #333;
        }

        .form-group label .required {
            color: red;
        }

        @media (min-width: 600px) {
            .modal-content {
                width: 60%;
            }
        }

        label {
            display: block;
            margin-bottom: 5px;
        }
        select, input[type="text"], input[type="email"], input[type="tel"], input[type="file"] {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        img {
            max-width: 100px;
            height: auto;
        }
        #userTableBody tr {
            transition: background-color 0.3s;
        }

        #userTableBody tr:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
<div id="appvue">
<div  class="main">


    <div class="container">
        <div class="form-group">
            <label for="searchUsername">用户名查询:</label>
            <input type="text" id="searchUsername" placeholder="请输入用户名..." onkeydown="if (event.key === 'Enter') searchUser()">
            <button class="openbtn" >查询用户</button>
        </div>

        <div id="users" class="section">
            <h2>开发人员信息</h2>
            <table>
                <thead>
                <tr>
                    <th class="center-align">系统编号</th>
                    <th class="center-align">工号</th>
                    <th class="center-align">头像</th>
                    <th class="center-align">部门-外键</th>
                    <th class="center-align">职位</th>
                    <th class="center-align">名字</th>
                    <th class="center-align">技能点</th>
                    <th class="center-align">员工状态</th>

                    <th class="center-align">操作</th>
                </tr>
                </thead>
                <tbody id="userTableBody">
                <!--查询动作-4 info数据显示 -->
                <tr class="" v-for="(value,index) in info"  :key="index">
                    <td><input :class="{isedit:thisIndex===index}" class="notedit" type="text" :disabled="!(thisIndex===index)" v-model="value.mId"></td>
                    <td><input :class="{isedit:thisIndex===index}" class="notedit" type="text" :disabled="!(thisIndex===index)" v-model="value.mNumber"></td>
                    <td><input :class="{isedit:thisIndex===index}" class="notedit" type="text" :disabled="!(thisIndex===index)" v-model="value.mFaceImg"></td>
                    <td><input :class="{isedit:thisIndex===index}" class="notedit" type="text" :disabled="!(thisIndex===index)" v-model="value.mFaceImg"></td>
                    <td><input :class="{isedit:thisIndex===index}" class="notedit" type="text" :disabled="!(thisIndex===index)" v-model="value.mJob"></td>
                    <td><input :class="{isedit:thisIndex===index}" class="notedit" type="text" :disabled="!(thisIndex===index)" v-model="value.mName"></td>
                    <td><input :class="{isedit:thisIndex===index}" class="notedit" type="text" :disabled="!(thisIndex===index)" v-model="value.mSkill"></td>
                    <td><input :class="{isedit:thisIndex===index}" class="notedit" type="text" :disabled="!(thisIndex===index)" v-model="value.mStatus"></td>
                    <td class="text-center">
                        <div class="btn-group">
                            <!--修改动作-1 修改按钮事件 -->
                            <button
                                    @click="thisIndex=index"
                                    class="btn btn-xs btn-default"
                                    type="button"
                                    data-toggle="tooltip"
                                    title="Edit Client">
                                修改
                            </button>
                            <!--删除动作-1 删除按钮事件   -->
                            <button
                                    class="btn btn-xs btn-default"
                                    type="button"
                                    data-toggle="tooltip"
                                    title="Remove Client"
                                    @click="deleteItem(index)">
                                删除
                            </button>
                            <!--修改动作-2 保存按钮事件 -->
                            <button @click="save(index)" class="btn btn-xs btn-default" type="button" data-toggle="tooltip" title="Remove Client">
                                <span>保存</span>
                            </button>
                        </div>
                    </td>
                </tr>

                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal for adding/editing users -->
<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <h2 id="modalTitle">添加用户</h2>
        <form id="userForm" enctype="multipart/form-data">
            <input type="hidden" id="userId" name="userId">

            <!-- Basic Information -->
            <div class="form-section">
                <h3>基本信息</h3>
                <div class="form-group">
                    <label for="username">用户名:<span class="required">*</span></label>
                    <input type="text" id="username" name="username" required>
                </div>
                <div class="form-group">
                    <label for="userType">用户类型:<span class="required">*</span></label>
                    <select id="userType" name="userType" required>
                        <option value="员工">员工</option>
                        <option value="访客">访客</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="departmentId">所属部门ID:<span class="required">*</span></label>
                    <select id="departmentId" name="departmentId" required>
                        <option value="1">部门1</option>
                        <option value="2">部门2</option>
                        <!-- Add more departments as needed -->
                    </select>
                </div>
            </div>

            <!-- Contact Information -->
            <div class="form-section">
                <h3>联系信息</h3>
                <div class="form-group">
                    <label for="phoneNumber">手机号码:</label>
                    <input type="tel" id="phoneNumber" name="phoneNumber">
                </div>
                <div class="form-group">
                    <label for="email">邮箱地址:</label>
                    <input type="email" id="email" name="email">
                </div>
            </div>

            <!-- Permission Information -->
            <div class="form-section">
                <h3>权限信息</h3>
                <div class="form-group">
                    <label for="accessLevel">访问级别:<span class="required">*</span></label>
                    <select id="accessLevel" name="accessLevel" required>
                        <option value="无" selected>无</option>
                        <option value="初级">初级</option>
                        <option value="中级">中级</option>
                        <option value="高级">高级</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="status">用户状态:<span class="required">*</span></label>
                    <select id="status" name="status" required>
                        <option value="有效">有效</option>
                        <option value="无效">无效</option>
                    </select>
                </div>
            </div>

            <!-- Additional Information -->
            <div class="form-section">
                <h3>附加信息</h3>
                <div class="form-group">
                    <label for="faceImage">人脸图片:</label>
                    <input type="file" id="faceImage" name="faceImage" accept="image/*">
                </div>
            </div>

            <button type="submit">保存</button>
        </form>
    </div>
</div>

</div>
<script>
    const app = new Vue({
        methods:{
            <!--查询动作-2  -->
            //获取列表
            getList(){
                axios.get('http://localhost:8080/javaeeMember/queryAll').then(response=>{
                    // console.log(response);
                    if(response.status === 200){
                        console.log("查询成功～～～～～");
                        this.info=response.data //   集合赋值给info
                    }
                })

            },
            //新增按钮事件,显示表单
            create(){
                this.isCreate = !this.isCreate
            },
            <!--增加动作-4 调用增加方法 -->
            //确认新增
            confirmCreate(){
                axios.post('http://localhost:8080/vue_userinfo?op=ui_save',this.newInfo).then(response=>{
                    // console.log("确认新增:"+this.newInfo.userName+"======");
                    //  console.log(response);
                    if(response.status === 200){
                        // console.log(response.data.ms);
                        this.getList()
                        // this.newInfo={
                        //         userId:'',
                        //         userMail:'',
                        //         userName:'',
                        //         userPhone:''
                        // }
                        this.isCreate = !this.isCreate //关闭显示表单
                        // alert('新增成功')
                    }
                })
            },
            <!--删除动作-2 删除按钮事件   -->
            //删除按钮事件
            deleteItem(index){
                if (confirm("您确定要执行此操作吗？")) {
                    axios.post('http://localhost:8080/vue_userinfo?op=ui_del',this.info[index]).then(response=>{
                        if(response.status===200){
                            this.getList()
                            //  alert('删除成功')
                        }
                    })
                } else {
                    alert('已取消删除')
                }

            },
            <!--修改动作-3 保存按钮事件 -->
            //保存按钮事件
            save(index){
                axios.post('http://localhost:8080/vue_userinfo?op=ui_upadte',this.info[index]).then(response=>{
                    if(response.status === 200){
                        //  console.log(response.data);
                        this.getList()
                        // alert('编辑成功')
                    }
                })
                this.thisIndex=''
            },
            removeEdit(){

            }
        },

        data(){
            return{
                <!--查询动作-3 info数据初始化集合对象 -->
                info: [],
                thisIndex:'',
                isCreate:false,
                <!--增加动作-2 newInfo来传递数据OOP -->
                newInfo:{
                    userId:'1001',
                    userMail:'111@qq.com',
                    userName:'矣三三',
                    userPhone:'1134567890'
                }
            }
        },
        <!--查询动作-5 调用方法-->
        mounted(){
            //Vue生命周期中第四个函数：该函数在执行过程中，已经将数据渲染到界面中，并且已经更新页面。
            this.getList()
        }
    })
    <!--查询动作-6 设置DIV——ID-->
    const vm = app.$mount("#appvue")
    console.log("------vue实例化成功--------------ok-----------------")
</script>
</body>
</html>
